<template>
	<view class="all">
		<image src="@/static/logo.png" class="touxiang"></image>
		<image class="touxiangkuang" :src="touxiangkuang[user.touxiangkuang]"></image>
		  <scroll-view class="kexuantouxiangkuang" :scroll-x="true">
		  	<view class="quanbutouxiangkuang">
		  		<view v-for="(item,index) in touxiangkuang" class="dange">
		  		<image class="tupian" :src=item  @click="click(index)" :style="{border:borders[index]}" />
		  	   </view>
		  	</view>
		  </scroll-view>
		  <button class="genggaitouxiangkuang" @click="genggaitouxiangkuang">更改头像框</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				touxiangkuang:["/static/txk1.jpg","/static/txk2.jpg","/static/txk3.webp","/static/txk4.webp"],
				borders:["","","",""],
				index:0,
				user:{},
				zhang:""
			}
		},
		created(){
			this.zhang=getApp().globalData.zhang
			this.gerenxinxi()
		},
		methods: {
			gerenxinxi(){
				uni.request({
				url:"http://localhost:8080/jbgn/chagerenxinxi",
				data:{zhang:this.zhang},
				success: (res) => {
					this.user=res.data
				   }
			})
			},
			click(index){
				this.index=index
				this.borders.forEach((item,indexx)=>{
					if(indexx!=index)
					  this.$set(this.borders,indexx,"") 
				})
			if(this.borders[index]=="")
			  this.borders[index]="2rpx solid red"
			
			},
			genggaitouxiangkuang(){
				
				uni.request({
					 url:"http://localhost:8080/jbgn/gaitouxiangkuang",
					 data:{zhang:this.zhang,touxiangkuang:this.index}
				})
				this.user.touxiangkuang=this.index
			}
		}
	}
</script>

<style>
    .all{
		position: absolute;
		width: 380rpx;
		height:350rpx ;
		left: 120rpx;
		top: 0rpx;
	}
	.touxiang{
		width: 90rpx;
		height: 90rpx;
		margin-top: 30rpx;
		margin-left: 145rpx;
		border-radius: 100%;
	}
	.touxiangkuang{
		position: absolute;
		width: 110rpx;
		height: 110rpx;
	    top: 25rpx;
		left: 140rpx;
		z-index: -1;
	}
	.kexuantouxiangkuang{
		margin-top: 20rpx;
		margin-left: 50rpx;
		width: 250rpx;
		height: 90rpx;
		white-space: nowrap;
	}
	.quanbutouxiangkuang{
			display: flex;
		flex-direction: row;
		align-items: center;
	}
	.dange{
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
	}
	.tupian{
		width: 80rpx;
		height: 80rpx;
	
	}
	.genggaitouxiangkuang{
	   width: 130rpx;
	   height: 60rpx;
	   margin-top: 30rpx;
	   line-height:60rpx ;
	}
</style>
